<template>

  <div style="height: 100%;width: 100%;">
    <el-container class="main">
      <el-aside width="210px" class="el-aside-admin">
        <div style="overflow:hidden;height: 75px;background-color: #0000;box-shadow: 0 0px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <img width="210px" src="@/assets/logo_1.png" style="margin-top: 20px;margin-left: 10px"/>
        </div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#0000"
          :default-active="$route.path"
          text-color="#fff"
          router
          active-text-color="#ffd04b">
          <el-menu-item v-for="item in menuList" @click.native="tab(item.title)" :index="item.url">
            <i :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container direction="vertical">
        <el-header style="margin: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 2px" class="header-admin">
          <div style="margin-top: 10px">
            <el-avatar icon="el-icon-user-solid" ></el-avatar>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">用户信息</el-dropdown-item>
                <el-dropdown-item command="b">修改密码</el-dropdown-item>
<!--                <el-dropdown-item command="d">切换到用户界面</el-dropdown-item>-->
                <el-dropdown-item command="c">安全退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-header>
        <el-main style="margin: 0 10px 10px 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 2px" class="main_el">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 15px">
            <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="title != ''">{{title}}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="updatePwdDialogShow">
      <el-form>
        <el-form-item label="旧密码" prop="password">
          <el-input placeholder="请输入旧密码" v-model="updatePWD.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input placeholder="请输入新密码" v-model="updatePWD.newPassword" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePwdDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="updatePwd">修 改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户信息" :visible.sync="userInfoDialogShow" width="400px">
      <el-form
        size="mini"
        :model="userInfo" label-position="right" label-width="170px" style="text-align: left">
        <el-form-item label="姓名:">
          {{userInfo.name}}
        </el-form-item>
        <el-form-item label="身份证号:">
          {{userInfo.identityCard}}
        </el-form-item>
        <el-form-item label="注册时间:">
          {{getTime(userInfo.createTime)}}
        </el-form-item>
        <el-form-item label="是否为管理员:">
          <span v-if="userInfo.isAdmin">是</span>
          <span v-else>否</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
  import menuList from '../utils/menuList'
  import {info,psw} from '../axios/api'
    export default {
        name: "admin",
        data(){
            return{
              userInfoDialogShow:false,
              updatePwdDialogShow:false,
              menuList:menuList.adminMenuList,
              title:"",
              userInfo:{},
              updatePWD:{
                password:"",
                newPassword:""
              }
            }
        },
        mounted() {
            //判断面包屑是否存在
            if (this.isStorage("mbx")){
                this.title = localStorage.getItem("mbx")
            }
            //判断是否退出登陆
            if (!this.isStorage("token")){
                this.alert("warning","token不存在，请重新登陆！");
                this.$router.push({ path:'/login'})
            }
            this.getUserInfo();
        },
        methods:{
            getUserInfo:async function(){
                let res = await info()
                // console.log(res)
                this.userInfo = res.data;
            },
            tab(title){
                this.title = title;
                localStorage.setItem("mbx",this.title)
            },
            updatePwd:async function(){
                if (this.updatePWD.newPassword == "" || this.updatePWD.password == ""){
                    this.alert("warning","请将表单填充完整！");
                    return;
                }
                let res = await psw(this.updatePWD)
                if(res.code == 0){
                    this.alert("success","修改成功！")
                }
            },
            handleCommand(command) {
                switch (command) {
                    case "a":
                        this.userInfoDialogShow = true;
                        break;
                    case "b":
                        this.updatePwdDialogShow = true;
                        break;
                    case "c":
                        localStorage.setItem("token", "");
                        localStorage.setItem("mbx",'');
                        localStorage.setItem("userName","");
                        this.$router.push({path: '/login'});
                        this.alert("success", "已安全退出！");
                        break;
                    case "d":
                        this.$router.push({ path:'/user'})
                        break;
                }
            },
        }
    }
</script>

<style>

  html{
    background-color: #E9EEF3;
  }
  .el-menu{
    border: none;
  }
  .main{
    width: 100%;
    height: 100%;
  }
  #app,html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px;
  }

  .header-admin {
    background-color: #fff;
    color: #333;
    text-align: right;
    line-height: 60px;
  }

  .el-aside-admin {
    background-color: #336699;
    color: #333;
    text-align: left;
  }

  .main_el {
    background-color: #fff;
    color: #333;
    text-align: left;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown{
    position: relative;
    bottom: 14px;
    font-size: 16px;
    left: 4px;
  }

  .el-menu-item i{
    color: #fff;
  }
</style>
